<template>
  <div>
    <el-card>
      <el-row type="flex" justify="space-between" align="middle" class="formdate">
        <el-form
          label-width="80px"
          :inline="true"
        >
          <el-form-item>
            <el-input v-model="form.student_name" placeholder="学员姓名" clearable />
          </el-form-item>
          <el-form-item prop="subject_name">
            <el-select v-model="form.subject_id" clearable placeholder="归属学科" @change="clickItem">
              <el-option v-for="item in subjectInformation" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item prop="class_name">
            <el-select v-model="form.class_id" clearable placeholder="归属班级">
              <el-option v-for="item in classData" :key="item.id" :label="item.class_name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="form.student_state" placeholder="账号状态" clearable>
              <el-option label="待审核" value="1" />
              <el-option label="正常" value="2" />
              <el-option label="禁用" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="searchh">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 右侧按钮 -->
        <div>
          <el-button type="warning" plain size="medium" @click="batchImport">
            批量导入
          </el-button>
          <el-button type="primary" plain size="medium" @click="increasing">
            增加学员
          </el-button>
        </div>
      </el-row>
      <!-- 主题表格 -->
      <el-row v-show="buttonDisplay" type="flex" justify=" start" style="height: 54px">
        <el-col>
          <el-button type="success" @click="batchEnableIndex">批量启用</el-button>
          <el-button type="warning" @click="batchDisable">批量禁用</el-button>
          <el-button type="danger" @click="batchDeletion">批量删除</el-button>
        </el-col>
      </el-row>

      <el-table border style="width: 100%" :data="list" @select="radioIndex" @select-all="radioIndex_all">
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="student_name" label="学生姓名" width="100" />
        <el-table-column prop="student_phone" label="手机号" width="120" />
        <el-table-column prop="class_name" label="班级名称" width="100" />
        <el-table-column prop="subject_name" label="学科名称" align="center" />
        <el-table-column prop="student_sex" label="性别" align="center" width="80">
          <template slot-scope="{row}">
            <div>
              <span v-if="row.student_sex === 1">男</span>
              <span v-else>女</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="student_state" label="状态" align="center" width="120">
          <template slot-scope="{row}">
            <div>
              <span v-if="row.student_state === 2">正常</span>
              <span v-else>待审核</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="创建人" align="center" width="100" />
        <el-table-column prop="created_at" label="创建时间" align="center" />

        <el-table-column label="操作" align="center">
          <template slot-scope="{row}">
            <el-button type="primary" icon="el-icon-edit" circle size="small" @click="echo(row.id)" />
            <el-button type="danger" icon="el-icon-delete" circle size="small" @click="delbtn(row.id)" />
          </template>
        </el-table-column>
      </el-table>
      <!-- /主题表格 -->
      <!-- 分页组件 -->
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <el-pagination
          background
          :current-page="page.page"
          :page-sizes="[10,20]"
          :page-size="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <studentList ref="StudentList" :dialog-visible.sync="dialogVisible" :subject-information="subjectInformation" />
    <UploadExcel :upload-show="uploadShow" @uploadData="uploadData" />
  </div>

</template>

<script>
import { addClass, delClass, getCataTree, classclass, searchForStudentInformation, accessStudentsDataToId, batchEnable, uploadForm } from '@/api/class'
import studentList from '@/views/class/components/studentList.vue'
export default {
  name: 'Student',
  components: {
    studentList
  },
  data() {
    return {
      input: '',
      list: [],
      page: {
        page: 1, // 当前页码
        total: 0, // 总数
        limit: 10// 限制条数
      },
      form: {
        student_name: '', // 学员姓名
        subject_id: '',
        class_id: '',
        student_state: ''

      },
      nowSubChildren: [{
        children: []
      }],
      subjectInformation: [],
      classData: [],
      dialogVisible: false,
      exceldialogVisible: false,
      buttonDisplay: false,
      uploadShow: false,
      enableData: []
    }
  },
  created() {
    this.addClass()
    this.getCataTree()
  },
  methods: {
    async addClass() {
      const { data } = await addClass(this.page)
      this.list = data.list
      this.page.page = data.page
      this.page.total = data.total
    },
    handleCurrentChange(val) { // val是最新页码数
      this.page.page = val
      // 判断搜索表单是否有数据存在,如果表单内有数据存在，分页切换时要请求的是筛选后的结果
      this.addClass()
    },
    handleSizeChange(val) { // 最新页显示条数
      this.page.limit = val
      console.log(this.page.limit)
      this.addClass()
    },
    async delbtn(id) {
      await this.$confirm('确认删除吗？')
      // 如果删除的是最后一页且只有最后一条数据
      const lastPage = Math.ceil(this.page.total / this.page.limit) // 最后一页
      if (lastPage !== 1 && lastPage === this.page.page && this.list.length === 1) {
        this.page.page--
      }
      await delClass([id])
      this.$message.success('删除成功')
      this.addClass()
    },
    async getCataTree() { // 获取学科
      const { data } = await getCataTree()
      this.subjectInformation = data
    },
    async clickItem() { // 选择框发生改变触发事件
      const { data } = await classclass({
        page: 1,
        limit: 1000,
        subject_id: this.form.subject_id
      })
      this.classData = data.list
    },
    reset() {
      this.form = {
        student_name: '', // 学员姓名
        subject_id: '',
        class_id: '',
        student_state: ''
      }
    },
    // 搜索事件
    async searchh() {
      try {
        const { data } = await searchForStudentInformation({
          ...this.form,
          page: 1,
          limit: 10
        })
        this.list = data.list
        this.page.total = data.total
      } catch (err) {
        console.log(err)
      }
    },
    increasing() {
      this.dialogVisible = true
    },
    async echo(id) {
      const { data } = await accessStudentsDataToId(id)
      this.$refs.StudentList.formDate = data
      this.dialogVisible = true
    },
    batchImport() {
      this.uploadShow = true
    },
    radioIndex_all(selection) {
      this.buttonDisplay = true
      if (!selection.length) {
        this.buttonDisplay = false
      }
      this.enableData = this.dataProcessing(selection)
    },
    radioIndex(selection, row) {
      this.buttonDisplay = true
      if (!selection.length) {
        this.buttonDisplay = false
      }
      this.enableData = this.dataProcessing(selection)
    },
    // 批量启用
    async batchEnableIndex() {
      try {
        await this.$confirm(`确定启用${this.enableData.length}条数据吗？`)
        await batchEnable({
          id: this.enableData,
          status: 2
        })
        this.$message.success('启用成功')
        this.addClass()
      } catch (err) {
        console.log(err)
      }
    },
    // 批量禁用
    async batchDisable() {
      try {
        await this.$confirm(`确定禁用${this.enableData.length}条数据吗？`)
        await batchEnable({
          id: this.enableData,
          status: 3
        })
        this.$message.success('禁用成功')
        this.addClass()
      } catch (err) {
        console.log(err)
      }
    },
    // 批量删除
    async  batchDeletion() {
      try {
        await this.$confirm(`确定删除${this.enableData.length}条数据吗？`)
        const lastPage = Math.ceil(this.page.total / this.page.limit) // 最后一页
        if (lastPage !== 1 && lastPage === this.page.page && this.list.length === 1) {
          this.page.page--
        }
        await delClass(this.enableData)
        this.$message.success('删除成功')
        this.addClass()
      } catch (err) {
        console.log(err)
      }
    },
    // 处理数据
    dataProcessing(selection) {
      if (!selection.length) {
        return
      }
      const arr = []
      selection.forEach(obj => {
        arr.push(obj.id)
      })
      return arr
    },
    async uploadData(tableList) {
      await uploadForm(tableList)
      this.addClass()
      this.uploadShow = false
    }

  }

}
</script>

<style>

</style>
